import React, { FC, useState } from "react"
import { Typography, Empty } from "antd"
import { useTitle } from "ahooks"
import styles from "./common.module.scss"
import QuestionCard from "../../components/QuestionCard"

const { Title } = Typography

const rawQuestionList = [
  {
    _id: "q1",
    title: "问卷1",
    isPublished: false,
    isStar: true,
    answerCount: 5,
    createAt: "3月10日 13：23",
  },
  // {
  //   _id: "q2",
  //   title: "问卷2",
  //   isPublished: true,
  //   isStar: true,
  //   answerCount: 3,
  //   createAt: "4月3日 13：23",
  // },
  // {
  //   _id: "q3",
  //   title: "问卷3",
  //   isPublished: false,
  //   isStar: true,
  //   answerCount: 7,
  //   createAt: "4月10日 13：23",
  // },
  // {
  //   _id: "q4",
  //   title: "问卷4",
  //   isPublished: true,
  //   isStar: true,
  //   answerCount: 2,
  //   createAt: "5月10日 13：23",
  // },
]

const Star: FC = () => {
  useTitle("问卷星球 - 星标问卷")

  const [questionList, setQuestionList] = useState(rawQuestionList)
  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>星标问卷</Title>
        </div>
        <div className={styles.right}>(搜索)</div>
      </div>
      <div className={styles.content}>
        {questionList.length === 1 && <Empty description="暂无数据"></Empty>}
        {questionList.length > 1 &&
          questionList.map(q => {
            const { _id } = q
            return <QuestionCard key={_id} {...q}></QuestionCard>
          })}
      </div>
      <div className={styles.footer}>分页</div>
    </>
  )
}
export default Star
